// import React from 'react';
// import { useParams,Link} from 'react-router-dom';
// import Card from 'react-bootstrap/Card';
// import Container from 'react-bootstrap/Container';

// function BirdDetail() {
//   const { id } = useParams(); // 获取URL中的鸟类ID
  
//   // 硬编码的鸟类详情数据（实际开发中应通过API获取）
//   const birdData = {
//     id: id,
//     name: "红腹锦鸡",
//     description: "中国特有鸟类，羽毛色彩艳丽，是国家二级保护动物。",
//     photo: "https://via.placeholder.com/400",
//     additionalInfo: `
//       学名: Chrysolophus pictus
//       科属: 雉科锦鸡属
//       分布: 中国中部和西部
//       保护等级: 国家二级保护动物
//       特征: 雄鸟羽毛艳丽，有金色冠羽，腹部红色
//       习性: 栖息于海拔1500-3000米的森林中
//       食性: 杂食性，以植物嫩芽、果实和昆虫为食
//     `
//   };

//   return (
//     <Container className="mt-4">

//       <div className="mb-4">
//         <Link to="/" className="btn btn-secondary">返回列表</Link>
//       </div>

//       <h2 className="mb-4">{birdData.name} 详情</h2>
//       <Card>
//         <Card.Img variant="top" src={birdData.photo} alt={birdData.name} />
//         <Card.Body>
//           <Card.Title>{birdData.name}</Card.Title>
//           <Card.Text>{birdData.description}</Card.Text>
//           <div className="mt-4">
//             <h5>详细信息</h5>
//             {/* 使用文本框展示详细信息 */}
//             <textarea 
//               className="form-control" 
//               rows="8"
//               readOnly
//               value={birdData.additionalInfo}
//             />
//           </div>
//         </Card.Body>
//       </Card>
//     </Container>
//   );
// }

// export default BirdDetail;

import React, { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import Card from 'react-bootstrap/Card';
import Container from 'react-bootstrap/Container';
import Spinner from 'react-bootstrap/Spinner';
import Alert from 'react-bootstrap/Alert';

function BirdDetail() {
  const { id } = useParams(); // 获取URL中的鸟类ID
  const [birdData, setBirdData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

//   useEffect(() => {
//     const fetchBirdDetail = async () => {
//       try {
//         const response = await fetch(`http://localhost:5000/birds/getBirdsByID?id=${id}`);
//         if (!response.ok) {
//           throw new Error('获取鸟类详情失败');
//         }
//         const data = await response.json();

        
//         setBirdData(data.data[0])
//       } catch (err) {
//         setError(err.message);
//       } finally {
//         setLoading(false);
//       }
//     };

//     fetchBirdDetail();
//   }, [id]);

useEffect(() => {
    const fetchBirdDetail = async () => {
      try {
        const response = await fetch(`http://localhost:5000/birds/getBirdsByID?id=${id}`);
        if (!response.ok) {
          throw new Error('获取鸟类详情失败');
        }
        const data = await response.json();
        console.log('Fetched data:', data); // 日志记录返回的数据

        // 确保 data 是数组并且至少有一个元素
        if (Array.isArray(data.data) && data.data.length > 0) {
          // console.log('详情数据:', data.data[0][0]); // 日志记录渲染前的状态
          setBirdData(data.data[0][0]);
        } else {
          throw new Error('鸟类数据为空');
        }

      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchBirdDetail();
  }, [id]);

  // console.log('数据类型:', birdData instanceof Object)
  // console.log('详情数据:', birdData); // 日志记录渲染前的状态


  if (loading) {
    return (
      <Container className="mt-4 text-center">
        <Spinner animation="border" role="status">
          <span className="visually-hidden">加载中...</span>
        </Spinner>
      </Container>
    );
  }

  if (error) {
    return (
      <Container className="mt-4">
        <Alert variant="danger">
          <Alert.Heading>加载错误</Alert.Heading>
          <p>{error}</p>
        </Alert>
        <Link to="/" className="btn btn-secondary">返回列表</Link>
      </Container>
    );
  }

  if (!birdData) {
    return (
      <Container className="mt-4">
        <Alert variant="warning">
          <Alert.Heading>未找到鸟类信息</Alert.Heading>
          <p>请求的鸟类ID不存在</p>
        </Alert>
        <Link to="/" className="btn btn-secondary">返回列表</Link>
      </Container>
    );
  }

  return (
    <Container className="mt-4">
      <div className="mb-4">
        <Link to="/" className="btn btn-secondary">返回列表</Link>
      </div>

      <h2 className="mb-4">{birdData.name} 详情</h2>
      <Card>
        <Card.Img 
          variant="top" 
        //   src={birdData.photo || 'https://via.placeholder.com/400'} 
        // src={birdData.photo} 
        src={birdData.photo || '/placeholder.jpg'} // 使用本地占位图
          alt={birdData.name} 
        />
        <Card.Body>
          <Card.Title>{birdData.name}</Card.Title>
          <Card.Text>{birdData.description}</Card.Text>
          <div className="mt-4">
            <h5>详细信息</h5>
            <textarea 
              className="form-control" 
              rows="8"
              readOnly
              value={birdData.detail || '暂无详细信息'}
            />
          </div>
        </Card.Body>
      </Card>
    </Container>
  );
}

export default BirdDetail;